<template>
  <div>
    <!-- 搜索 start -->
    <a-card :bordered="false">
      <a-form layout="inline" :form="form" @submit="handleSubmit">
        <a-form-item label="姓名">
          <a-input v-decorator="['name']" />
        </a-form-item>
        <a-form-item label="角色">
          <a-select
            v-decorator="['roleName', { initialValue: '' }]"
            style="width: 100px"
          >
            <a-select-option value="">全部</a-select-option>
            <a-select-option value="1">超级管理员</a-select-option>
            <a-select-option value="2">管理员</a-select-option>
            <a-select-option value="3">用户</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="邮箱">
          <a-input v-decorator="['email']" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit" @click="getData">
            查询
          </a-button>
          <a-button :style="{ marginLeft: '8px' }" @click="handleReset">
            重置
          </a-button>
        </a-form-item>
      </a-form>
    </a-card>
    <!-- 搜索 end -->

    <!-- 表格 start -->
    <a-card
      :bordered="false"
      style="margin-top: 15px"
      :bodyStyle="{ padding: '24px 24px 0' }"
    >
      <div class="action-btn">
        <a-button type="primary" @click="handleShowAdd"> 新增用户 </a-button>
        <a-button
          v-if="selectedRows.length"
          @click="handleBatchDelete"
          style="margin-left: 15px"
        >
          批量删除
        </a-button>
        <div class="icon">
          <a-tooltip>
            <template slot="title"> 刷新 </template>
            <a-icon @click="getData" type="reload" />
          </a-tooltip>
          <a-tooltip>
            <template slot="title"> 密度 </template>

            <a-dropdown :trigger="['click']">
              <a-icon type="column-height" />
              <a-menu
                :selectedKeys="tableSize"
                @click="selectMenu"
                slot="overlay"
                style="width: 80px"
              >
                <a-menu-item key="default">默认</a-menu-item>
                <a-menu-item key="middle">中等 </a-menu-item>
                <a-menu-item key="small">紧凑</a-menu-item>
              </a-menu>
            </a-dropdown>
          </a-tooltip>
          <a-tooltip v-if="fullscreen">
            <template slot="title"> 取消全屏 </template>
            <a-icon @click="handleChangeFullscreen" type="fullscreen-exit" />
          </a-tooltip>
          <a-tooltip v-else>
            <template slot="title"> 全屏 </template>
            <a-icon @click="handleChangeFullscreen" type="fullscreen" />
          </a-tooltip>
        </div>
      </div>
      <a-alert
        type="info"
        show-icon
        style="margin-bottom: 15px"
        v-if="selectedRows.length"
      >
        <span slot="message">
          已选择：
          <span style="font-weight: 600; color: #f00">
            {{ selectedRows.length }}
          </span>
          项
        </span>
        <a-icon style="vertical-align: top" type="info-circle" slot="icon" />
      </a-alert>
      <a-table
        :loading="loading"
        :columns="columns"
        :data-source="dataSource"
        :rowKey="(record) => record.id"
        :size="tableSize[0]"
        :row-selection="{
          onChange: handleTableSelect,
          selectedRowKeys: selectedRows.map((item) => item.id),
        }"
        :pagination="{ ...pagination, size: tableSize[0] }"
      >
        <span slot="index" slot-scope="text, record, index">
          {{ index + 1 }}
        </span>
        <span slot="tags" slot-scope="tags">
          <a-tag
            v-for="tag in tags"
            :key="tag"
            :color="
              tag === 'loser'
                ? 'volcano'
                : tag.length > 5
                ? 'geekblue'
                : 'green'
            "
          >
            {{ tag.toUpperCase() }}
          </a-tag>
        </span>
        <span slot="action" slot-scope="text, record">
          <a @click="handleShowEditor(record)">编辑</a>
          <a-divider type="vertical" />
          <a-popconfirm
            title="你确定删除此条数据?"
            ok-text="确定"
            cancel-text="取消"
            @confirm="handleConfirmDelete(record)"
          >
            <a>删除</a>
          </a-popconfirm>
        </span>
      </a-table>
    </a-card>
    <!-- 表格 end -->

    <editor-user-modal :visible="modalVisible" :info="recordInfo" @closeModal="handleCloseModal" />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import EditorUserModal from "./editorUserModal.vue";
export default {
  name: "Authapproval",
  components: { EditorUserModal },
  data() {
    return {
      columns: [
        {
          title: "序号",
          dataIndex: "index",
          key: "index",
          scopedSlots: { customRender: "index" },
        },
        {
          title: "ID",
          dataIndex: "id",
          key: "id",
        },
        {
          title: "姓名",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "角色",
          key: "tags",
          dataIndex: "tags",
          scopedSlots: { customRender: "tags" },
        },
        {
          title: "邮箱账号",
          key: "email",
          dataIndex: "email",
        },
        {
          title: "Action",
          key: "action",
          scopedSlots: { customRender: "action" },
        },
      ],
      dataSource: [],
      loading: false,
      tableSize: ["middle"],
      selectedRows: [],
      pagination: {
        defaultCurrent: 1,
        size: "default", // 此参数无效，分页尺寸，和Table组件的size保持统一
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ["10", "20", "30", "50"],
        change: this.handleChangePage,
        showSizeChange: this.handleChangePageShowSize,
        // total: 500, // 总条数
        // current: 1, // 当前页
        // pageSize: 20, // 每页条数
      },
      form: this.$form.createForm(this, { name: "user_management_search" }),

      modalVisible: false,
      recordInfo: null,
    };
  },
  computed: {
    ...mapGetters(["fullscreen"]),
  },
  mounted() {
    this.$nextTick(() => {
      // To disabled submit button at the beginning.
      this.form.validateFields();
    });
    this.getData();
  },
  methods: {
    getData() {
      this.loading = true;
      setTimeout(() => {
        const dataSource = [
          {
            id: "1",
            name: "John Brown",
            age: 32,
            address: "New York No. 1 Lake Park",
            tags: ["nice", "developer"],
          },
          {
            id: "2",
            name: "Jim Green",
            age: 42,
            address: "London No. 1 Lake Park",
            tags: ["loser"],
          },
          {
            id: "3",
            name: "Joe Black",
            age: 32,
            address: "Sidney No. 1 Lake Park",
            tags: ["cool", "teacher"],
          },
        ];
        for (let i = 0; i < 30; i += 1) {
          dataSource.push({
            id: 4 + i,
            name: "Joe Black" + i,
            age: 32 + i,
            address: "Sidney No. 1 Lake Park",
            tags: [["cool", "teacher", "loser"][i % 3]],
          });
        }
        this.dataSource = dataSource;
        this.pagination = Object.assign({}, this.pagination, {
          total: dataSource.length, // 总条数
          current: 1, // 当前页
          pageSize: 10, // 每页条数
        });
        this.loading = false;
      }, 2000);
    },
    hasErrors: function (fieldsError) {
      return Object.keys(fieldsError).some((field) => fieldsError[field]);
    },
    // Only show error after a field is touched.
    userNameError() {
      const { getFieldError, isFieldTouched } = this.form;
      return isFieldTouched("userName") && getFieldError("userName");
    },
    // Only show error after a field is touched.
    passwordError() {
      const { getFieldError, isFieldTouched } = this.form;
      return isFieldTouched("password") && getFieldError("password");
    },

    selectMenu({ keyPath }) {
      this.tableSize = keyPath;
    },

    /** 提交 */
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log("Received values of form: ", values);
        }
      });
    },
    /** 重置 */
    handleReset() {
      this.form.resetFields();
    },

    /** 确认删除 */
    handleConfirmDelete(record) {
      console.log(record);
      this.$message.success("已删除！");
    },
    /** 批量删除 */
    handleBatchDelete() {
      const { selectedRows } = this;
      this.$confirm({
        title: "提示",
        content: () => (
          <div>
            是否删除选中的
            <span style="color:red;font-weight: 600;padding-left:3px">
              {selectedRows.length}
            </span>
            项?
          </div>
        ),
        okText: "确认",
        cancelText: "取消",
        okType: "danger",
        onOk: () => {
          this.$message.success("已删除！");
        },
        class: "test",
      });
    },
    /** 显示编辑 */
    handleShowEditor(record) {
      this.modalVisible = true;
      this.recordInfo = record;
    },
    /** 显示新增 */
    handleShowAdd() {
      this.modalVisible = true;
      this.recordInfo = null;
    },
    /** 关闭弹框 */
    handleCloseModal() {
      this.modalVisible = false;
      this.recordInfo = null;
    },
    /** 表格勾选 */
    handleTableSelect(selectedRowKeys, selectedRows) {
      console.log(selectedRowKeys, selectedRows);
      this.selectedRows = selectedRows;
    },
    handleChangePage(page, pageSize) {
      console.log(page, pageSize);
    },
    handleChangePageShowSize(current, size) {
      console.log(current, size);
    },
    /** 切换全屏 */
    handleChangeFullscreen() {
      this.$store.commit("global/changeFullScreen");
    },
  },
};
</script>

<style lang="less" scoped>
.action-btn {
  margin-bottom: 15px;
}

.icon {
  font-size: 16px;
  float: right;
  /deep/ .anticon {
    padding: 4px;
    cursor: pointer;
  }
}
</style>